<template>
  <div class="container">
    <div class="header">
      <van-icon @click="goBack" name="arrow-left" class="header-left" size="25" />
      填写服务订单
    </div>
    <statusBar item="0" />

    <van-cell-group>
      <van-cell class="cell">
        <template #title>
          <van-image width="25" height="25" :src="createInfo.service.serviceImg" />
          <span class="server-name">
            {{ createInfo.service.serviceName }}
          </span>
        </template>
        <template #default>
          <div class="service-text">
            服务内容
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <!--填写订单-->
    <van-cell-group>
      <van-cell class="cell" @click="showHospital = true">
        <template #title>
          就诊医院
        </template>
        <template #default>
          <div @click="showHospital = true">
            {{ form.hospital_name ? form.hospital_name : '请选择就诊医院' }}
            <van-icon v-show="!form.hospital_name" name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell class="cell" @click="showStartTime = true">
        <template #title>
          就诊时间
        </template>
        <template #default>
          <div @click="showStartTime = true">
            {{ currentDate ? currentDate.join('-') : '请选择就诊时间' }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell class="cell" @click="showCompanion = true">
        <template #title>
          陪诊师
        </template>
        <template #default>
          <div @click="showCompanion = true">
            {{ companion_name || '请选择陪诊师' }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>

      <van-cell class="cell">
        <template #title>
          接送地址
        </template>
        <template #default>
          <van-field class="text" input-align="right" v-model="form.receiveAddress" placeholder="请填写接送地址" />
        </template>
      </van-cell>

      <van-cell class="cell">
        <template #title>
          练习电话
        </template>
        <template #default>
          <van-field class="text" input-align="right" v-model="form.tel" placeholder="请填写联系电话" />
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group style="width: 100%;" title="服务需求" class="cell">
      <van-field class="text" style="width:100%;height: 80px;" input-align="left" v-model="form.demand"
        placeholder="请填写备注" />
    </van-cell-group>
    <van-button style="position:fixed;bottom: 0;width: 100%;margin-top: 20px;" @click="submit"
      type="primary">submit!</van-button>
    <!--弹窗-->
    <van-popup v-model:show="showHospital" position="bottom" :style="{ padding: '30%' }">
      <van-picker :columns="showHospColumns" @confirm="onConfirm" @cancel="showHospital = false" @change="onChange" />
    </van-popup>

    <van-popup v-model:show="showStartTime" position="bottom" :style="{ padding: '30%' }">
      <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" @cancel="showStartTime = false"
        @confirm="showTimeConfirm" />
    </van-popup>

    <van-popup v-model:show="showCompanion" position="bottom" :style="{ padding: '30%' }">
      <van-picker :columns="CompanionColumns" @confirm="showCompanionConfrim" @cancel="showCompanion = false" />
    </van-popup>

    <van-dialog v-model:show="showCode" title="微信支付" show-cancel-button>
      <van-icon name="cross" class="close" @click="closeCode"></van-icon>
      <img :src="codeImg" />
    </van-dialog>
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance, reactive, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import statusBar from '../../components/statusBar.vue';
import Qrcode from 'qrcode';

const closeCode=()=>{
    router.push('/order');
    showCode.value = false;
  };

const showCode = ref(false);

const codeImg=ref('');

// 获取当前vue实例
const { proxy } = getCurrentInstance();

// form数据
const form = reactive({
  hospital_id: '',
  hospital_name: '',
  starttime: '',
  companion_id: '',
  receiveAddress: '',
  tel: '',
  demand: ''
})

// 创建订单信息
const createInfo = reactive({
  companion: [],
  hospitals: [],
  service: {}
})

const showHospColumns = computed(() => {
  return createInfo.hospitals.map(item => {
    return {
      text: item.name,
      value: item.id
    }
  })
});


onMounted(async () => {

  const { data } = await proxy.$api.h5Companion();

  Object.assign(createInfo, data.data);

})

const router = useRouter();

const goBack = () => {//点击返回
  router.go(-1);
};

const showHospital = ref(false);//医院弹窗状态

const showStartTime = ref(false);//选择就诊时间弹窗状态

const onConfirm = (value) => {
  console.log(value, 'currentValue');
  form.hospital_id = value.selectedOptions[0].value;
  form.hospital_name = value.selectedOptions[0].text;
  showHospital.value = false;
}

const showTimeConfirm = (value) => {
  const dateStr = value.selectedValues.join('-');
  form.starttime = new Date(dateStr).getTime();
  showStartTime.value = false;
}

const onChange = (value) => {
  console.log(value);
}

const currentDate = ref();

const minDate = ref(new Date());

//选择陪诊师
const showCompanion = ref(false);
const CompanionColumns = computed(() => {
  return createInfo.companion.map(item => {
    return {
      text: item.name,
      value: item.id
    }
  })
});

const companion_name = ref();

const showCompanionConfrim = (value) => {
  console.log(value, 'value');
  form.companion_id = value.selectedOptions[0].value;
  companion_name.value = value.selectedOptions[0].text;
  showCompanion.value = false;
}

const submit = async () => {
  const params = [
    'hospital_id',
    'hospital_name',
    'demand',
    'companion_id',
    'receiveAddress',
    'tel',
    'starttime'
  ];
  // console.log(form,'form');
  for (const i of params) {
    // console.log(i,form[i],'form[i]');
    if (!form[i]) {
      showNotify({ type: 'warning', message: '请填写完整' });
      return;
    }
  }

  showNotify({ type: 'success', message: 'submit success' });

  const { data } = await proxy.$api.createOrder(form);

  console.log(data.data.wx_code, 'responseData');

  Qrcode.toDataURL(data.data.wx_code).then((url)=>{
    showCode.value = true;

    codeImg.value = url;
  });

  
  
}
</script>

<style scoped lang="less">
.container {
  background-color: #f0f0f0;
  height: 100vh;
}

.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;

  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;

  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }

  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }

  .server-name {
    margin-left: 10px;
  }
}

.service-text {
  background: url() no-repeat center center;
  background-size: 20px;
}

.sumbit {
  position: absolute;
  bottom: 0;
}

::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;

  .close {
    position: absolute;
    left: 20px;
  }
}
</style>